<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String contextPath = request.getContextPath();
%> 	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="./css/branch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css">
<script type="text/javascript" src="./js/jquery.form.stylishSelect.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
	/*이미지 클릭시 사진 변경  */
	function clickImg(num){
		if(num == 1){
			document.getElementById("viewimg").src="./images/branch/img${branch.branch_num}-1.jpg";
		}else if(num == 2){
			document.getElementById("viewimg").src="./images/branch/img${branch.branch_num}-2.jpg";
		}else if(num == 3){
			document.getElementById("viewimg").src="./images/branch/img${branch.branch_num}-3.jpg";
		}
	}
	
	/* 구글맵 */
		window.onload = function(){
		//지오로케이션 서비스 지원 여부 체크
		if(!navigator.geolocation){
			document.getElementById('disp').innerHTML = '위치 정보 미지원';
			return;
		}
		
		//사용자 현재 위치 확인
		navigator.geolocation.getCurrentPosition(function(position){
			
			if('${branch.branch_num}' == 1){
				var lat = 37.498448;
				var lon = 127.027932;
			}else if('${branch.branch_num}' == 2){
				var lat = 37.520801;
				var lon = 126.923857;
			}if('${branch.branch_num}' == 3){
				var lat = 37.568518;
				var lon = 126.978124;
			}
		
					
			//구글맵에 표시할 위치 정보를 갖는 객체 생성
			var initLoc = new google.maps.LatLng(lat,lon);
			
			//구글맵 객체 생성
			var map = new google.maps.Map(
				document.getElementById('map_canvas'),
				{
					zoom:16,
					mapTypeId:google.maps.MapTypeId.ROADMAP	//ROADMAP,TERRAIN
				}
			);
			//구글맵에 위치 정보 매칭
			map.setCenter(initLoc);	//지도의 중앙에 현재 위치 셋팅
			
			//마커 표시
			var marker = new google.maps.Marker({position:initLoc,map:map,title:'${branch.branch_name}'});
			
		});
		
	};
	
	function selectStore(branchId) {
		var value = document.getElementById(branchId).value;

		if(value=='강남점'){
			location.href="<%=contextPath%>/branch.do?branchNum=1";
			document.getElementById('branchName').value='강남점';
		} else if(value=='여의도점'){
			location.href="<%=contextPath%>/branch.do?branchNum=2";
			document.getElementById('branchName').value='여의도점';
		}else if(value=='청계광장점'){
			location.href="<%=contextPath%>/branch.do?branchNum=3";
			document.getElementById('branchName').value='청계광장점';
		}
	}
	
</script>
<style type="text/css">
	.store{
		text-align: left;
		padding: 0;
	}
	.product_line { 
		width:705px; height:2px; float:left; background:#d3ccbe;margin-left: 81px;
	}
	#wrapStore{
		font-family: 'han';
	}
</style>
</head>
<body>
	<div id="wrapStore">
		<div style="margin-left: 80px; margin-top: 40px;" align="left">
			<img src="./images/branch/storetop.png">
			<img src="./images/branch/storetop2.png" width="25%" style="margin-left: 50px">		
		</div>
		<p class="product_line"></p>
		<table style="margin-left: 80px; margin-top: 220; margin-bottom: 100px;">
			<tr>
				<td>
					<div class="store_view01" style="margin-bottom:0px;">
						<div class="store_map_pic">
							<img id="viewimg"  src="./images/branch/img${branch.branch_num}-1.jpg"  width="300" height="200"  alt="" />											
						</div>
					</div>
				</td>
				<td class="store">
					<select id="branch">
						<option id="branchName" value="">지점선택</option>
						<option id="branch1" value="강남점">강남점</option>
						<option id="branch2" value="여의도점" >여의도점</option>
						<option id="branch3" value="청계광장점">청계광장점</option>
					</select>
					<input type="button" onclick="selectStore('branch')" value="보기">
					<br><br>
					<strong class="stit">지점</strong>&nbsp;&nbsp;
					<span>${branch.branch_name}</span>
					<br><br>
					<strong class="stit">주소</strong>&nbsp;&nbsp;&nbsp;<span class="center_t">${branch.branch_address}</span>
					<br><br>
					<span>COFFEE HAGGENNA ${branch.branch_name}에서<br>
					 편안한 휴식을 커피와 함께 즐기세요.</span>
					 <br><br>
					 <div class="store_map_pic" style="vertical-align: bottom;" >
					 	<ul id="small">				
							<li><a href="javascript:clickImg(1)"><img src="./images/branch/img${branch.branch_num}-1.jpg" alt="" width="99" height="66" /></a></li>
							<li><a href="javascript:clickImg(2)"><img src="./images/branch/img${branch.branch_num}-2.jpg" alt="" width="99" height="66" /></a></li>
							<li class="last"><a href="javascript:clickImg(3)"><img src="./images/branch/img${branch.branch_num}-3.jpg" alt="" width="99" height="66" /></a></li>			
						</ul>
					 </div>
				</td>
			</tr>
			<tr>
			<td colspan="2"><p style="width:705px; height:2px;background:#d3ccbe; margin-top: 8px; margin-bottom: 4px;"></p></td>
			</tr>
			<tr id="disp">
				<td colspan="2" class="store">찾아 오시는길</td>
			</tr>
			<tr height="300">
			<td colspan="2" id="map_canvas">
			</td>
			</tr>
		</table>
	</div>
</body>
</html>